<#escape x as x?html>
<form class="form-horizontal form-fusion" name="recordForm" id="recordForm" method="post" action="${actionType!}">
    <input type="text" class="hide"
           name="id" value="${(record.id)!}">
    <div class="form-group">
        <label class="col-sm-3 control-label" for="account"><@s.message "base.user.modal.account"/></label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="account" placeholder="<@s.message "base.user.modal.account"/>"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.account)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="name"><@s.message "base.user.modal.name"/></label>
        <div class="col-sm-8">
            <input type="text" class="form-control"
                   name="name" placeholder="<@s.message "base.user.modal.name"/>"
                   data-error="<@s.message "validator.error.require"/>" required
                   value="${(record.name)!}">
        </div>
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="password"><@s.message "base.user.modal.password"/></label>
        <div class="col-sm-8">
            <input type="password" class="form-control"
                   name="password" placeholder="<@s.message "base.user.modal.password"/>"
                   data-minlength="5" data-error="<@s.message "base.user.modal.password.error"/>" required
                   value="${(record.password)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="repswd"><@s.message "base.user.modal.repswd"/></label>
        <div class="col-sm-8">
            <input type="password" class="form-control"
                   name="repswd" placeholder="<@s.message "base.user.modal.repswd"/>"
                   data-match="[name=password]" data-error="<@s.message "base.user.modal.repswd.error"/>" required
                   value="${(record.password)!}">
            <div class="help-block with-errors"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="userRoles"><@s.message "base.user.modal.userRoles"/></label>
        <div class="col-sm-8">
            <select id="roleSelect" class="form-control select2"
                    data-url="${contextPath}/base/role/rest/findAll" data-value="${(record.roleIds)!}"
                    data-key="id"
                    multiple="true"
                    name="roleIds" data-placeholder="<@s.message "base.user.modal.userRoles"/>">
            </select>
        </div>
    </div>
    <div id="dvNodeIdsDiv" class="form-group" hidden>
        <label class="col-sm-3 control-label" for="dvNodeIds"><@s.message "base.user.modal.dvNodes"/></label>
        <div class="col-sm-8">
        <#--            <select class="form-control select2" multiple="multiple"
                            data-url="${contextPath}/base/user/rest/findAllDVNodes" data-value="${(record.dvNodeIds)!}"
                            data-key="id"
                            name="dvNodeIds" data-placeholder="<@s.message "base.user.modal.dvNodes"/>">
                    </select>-->
            <input type="text" class="hide"
                   name="dvNodeIds" placeholder="<@s.message "base.user.modal.dvNodes"/>"
                   value="${(record.dvNodeIds)!}">
            <div class="dvNode-tree fancytree-form"></div>
        </div>
    </div>
<#--<div class="form-group">-->
<#--<label class="col-sm-3 control-label" for="dvServerIds"><@s.message "base.user.modal.dvServers"/></label>-->
<#--<div class="col-sm-8">-->
<#--<select class="form-control select2"-->
<#--data-url="${contextPath}/base/user/rest/findAllDVServers" data-value="${(record.dvServerIds)!}"-->
<#--data-key="id"-->
<#--name="dvServerIds" data-placeholder="<@s.message "base.user.modal.dvServers"/>">-->
<#--</select>-->
<#--</div>-->
<#--</div>-->
<#--<div class="form-group">-->
<#--<label class="col-sm-3 control-label" for="sex"><@s.message "base.user.modal.sex"/></label>-->
<#--<div class="col-sm-8">-->
<#--<select class="form-control" data-dict="sex" data-value="${(record.sex)!}"-->
<#--name="sex" data-placeholder="<@s.message "base.user.modal.sex"/>">-->
<#--</select>-->
<#--</div>-->
<#--</div>-->
    <#--<div class="form-group">-->
        <#--<label class="col-sm-3 control-label" for="telephone"><@s.message "base.user.modal.telephone"/></label>-->
        <#--<div class="col-sm-8">-->
            <#--<input type="text" class="form-control"-->
                   <#--name="telephone" placeholder="<@s.message "base.user.modal.telephone"/>"-->
                   <#--value="${(record.telephone)!}">-->
        <#--</div>-->
    <#--</div>-->
<#--<div class="form-group">-->
<#--<label class="col-sm-3 control-label" for="mobilePhone"><@s.message "base.user.modal.mobilePhone"/></label>-->
<#--<div class="col-sm-8">-->
<#--<input type="text" class="form-control"-->
<#--name="mobilePhone" placeholder="<@s.message "base.user.modal.mobilePhone"/>"-->
<#--value="${(record.mobilePhone)!}">-->
<#--</div>-->
<#--</div>-->
    <#--<div class="form-group">-->
        <#--<label class="col-sm-3 control-label" for="email"><@s.message "base.user.modal.email"/></label>-->
        <#--<div class="col-sm-8">-->
            <#--<input type="email" class="form-control"-->
                   <#--name="email" placeholder="<@s.message "base.user.modal.email"/>"-->
                   <#--data-error="<@s.message "base.user.modal.email.error"/>"-->
                   <#--value="${(record.email)!}">-->
            <#--<div class="help-block with-errors"></div>-->
        <#--</div>-->
    <#--</div>-->
<#--<div class="form-group">-->
<#--<label class="col-sm-3 control-label" for="address"><@s.message "base.user.modal.address"/></label>-->
<#--<div class="col-sm-8">-->
<#--<input type="text" class="form-control"-->
<#--name="address" placeholder="<@s.message "base.user.modal.address"/>"-->
<#--value="${(record.address)!}">-->
<#--</div>-->
<#--</div>-->
    <div class="form-group">
        <label class="col-sm-3 control-label" for="state"><@s.message "base.user.modal.state"/></label>
        <div class="col-sm-8">
            <select class="form-control" data-dict="state" data-value="${(record.state)!}"
                    name="state">
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label" for="description"><@s.message "base.user.modal.desc"/></label>
        <div class="col-sm-8">
            <textarea class="form-control" name="description" type="text"
                      placeholder="<@s.message "base.user.modal.desc"/>"></textarea>
        </div>
    </div>
</form>
<script>
    context.call([
        "scanSelect", "core", "jQueryFancyTree"
    ], function (scanSelect, core) {
        scanSelect.initSelect();

        if ($("#roleSelect").attr("data-value") == 3) {
            $("#dvNodeIdsDiv").show();
        }

        $("#roleSelect").change(function () {
            var roleId = $(this).children('option:selected').val();
            if (roleId == 3) {
                $("#dvNodeIdsDiv").show();
            } else {
                $("#dvNodeIdsDiv").hide();
            }
        });

        $(".dvNode-tree").fancytree({
            checkbox: true,
            selectMode: 1,
//            minExpandLevel:3,//展开到第3级
            source: {
                url: core.getUrl("/base/user/rest/dvNodeTree?selectedId="+$("input[name='dvNodeIds']").val()),
                debugDelay: 100
            },
            icon: function (event, data) {
                if (data.node.data.type == "cluster") {
                    return core.getUrl('/assets/img/tree/cluster.png');
                } else if(data.node.data.type == "module") {
                    return core.getUrl('/assets/img/tree/module.png');
                } else {
                    return core.getUrl('/assets/img/tree/dv_node.png');
                }
            },
            select: function (event, data) {
                // Get a list of all selected nodes, and convert to a key array:
                var selKeys = $.map(data.tree.getSelectedNodes(), function (node) {
                    var ret = node.key;
                    return ret;
                });
                $("input[name='dvNodeIds']").val(selKeys);
            }
        });

        if ($("#recordForm").attr("action") == "view")  $(".dvNode-tree").fancytree("disable");
    });
</script>
</#escape>